<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #box1 {
      width: 100px;
      height: 100%;
      background-color: antiquewhite;
      margin-right: 10px;
      line-height: 50px;
      text-align: center;
    }
    #box2 {
      width: 100px;
      height: 100%;
      background-color: antiquewhite;
      margin-right: 10px;
      line-height: 50px;
      text-align: center;
    }
    #box3 {
      width: 100px;
      height: 100%;
      background-color: antiquewhite;
      margin-right: 10px;
      line-height: 50px;
      text-align: center;
    }
  </style>

  <body>
    <div id="box">
      <div id="box1">巴西</div>
      <div id="box2">沙特阿拉伯</div>
      <div id="box3">比利时</div>
    </div>
  </body>
  <script>
    var hh = document.getElementById("box1");
    var yy = document.getElementById("box2");
    var ww = document.getElementById("box3");
    hh.onmouseover = function () {
      hh.style.backgroundColor = "red";
      hh.style.color = "blue";
    };
    hh.onmouseout = function () {
      hh.style.backgroundColor = "";
      hh.style.color = "";
    };
    yy.onmouseover = function () {
      yy.style.backgroundColor = "crimson";
      yy.style.color = "blueviolet";
    };
    yy.onmouseout = function () {
      yy.style.backgroundColor = "";
      yy.style.color = "";
    };
    ww.onmouseover = function () {
      ww.style.backgroundColor = "chartreuse";
      ww.style.color = "coral";
    };
    ww.onmouseout = function () {
      ww.style.backgroundColor = "";
      ww.style.color = "";
    };
  </script>
</html>
